<template>
    <div class='relation'>
        <div id='relate_graph2' :style="{width: '400px', height: '400px'}"></div>
    </div>
</template>
<script>
    import echarts from 'echarts';
    export default {
        props: {
            value: String
        },
        data () {
            return {
                list1: [{
                    'serviceCode': 10000,
                    'serviceName': '总行前置1',
                    'psize': 20,
                    'csize': 30,
                    'category': 0,
                    'name': '总行前置1'
                }, {
                    'serviceCode': 10001,
                    'serviceName': '总行前置2',
                    'psize': 16,
                    'csize': 30,
                    'category': 0,
                    'name': '总行前置2'
                }, {
                    'serviceCode': 10002,
                    'serviceName': '总行前置3',
                    'psize': 56,
                    'csize': 30,
                    'category': 1,
                    'name': '总行前置3'
                }],
                list2: [{
                    'sourceId': '10000',
                    'targetId': '10001'
                }, {
                    'targetId': '10000',
                    'sourceId': '10001'
                }]
            }
        },
        mounted () {
            this.drawLine();
            //this.GetRandom(this.list1);
        },
        methods: {
            drawLine () {
                //this.GetRandom(this.list1);
                var myChart = echarts.init(document.getElementById('relate_graph2'));
                var option = {
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    color:['#83e0ff', '#45f5ce'],
                    legend: {
                        show: true,
                        data: [
                            {name: '接口', textStyle:{color:'#333'}},
                            {name: '服务', textStyle:{color:'#333'}}
                        ]
                    },
                    series : [{
                        type: 'graph',
                         layout: 'force', 
                        legendHoverLink : true, //是否启用图例 hover(悬停) 时的联动高亮。
                        hoverAnimation : true, //是否开启鼠标悬停节点的显示动画
                        data: this.list1.map(function (node) {
                        return {
                            x: node.x,
                            y: node.y,
                            id: node.serviceCode,
                            symbolSize: node.psize,
                            symbolSize1: node.csize,
                            category: node.category,
                            itemStyle: {
                                normal: {
                                    color: node.color
                                }
                            }
                        };
                        }),
                        edges: this.list2.map(function (edge) {
                            return {
                                source: edge.sourceId,
                                target: edge.targetId
                            };
                        }),
                        label : { //=============图形上的文本标签
                            normal : {
                                show : true, //是否显示标签。
                                position : 'outside', //标签的位置。['50%', '50%'] [x,y]
                                textStyle : { //标签的字体样式
                                    // color : '#333', //字体颜色
                                    fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                    fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200
                                    fontFamily : 'sans-serif', //文字的字体系列
                                    fontSize : 12 //字体大小
                                }
                            },
                            emphasis : { //高亮状态
                                textStyle : { //标签的字体样式
                                    // color : '#a25fbc', //字体颜色
                                    fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                    fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200
                                    fontFamily : 'sans-serif', //文字的字体系列
                                    fontSize : 12 //字体大小
                                }
                            }
                        },
                        edgeSymbol: [ 'arrow', 'none' ],
                        roam: true,
                        force: {  
                            edgeLength: 50,//连线的长度  
                            repulsion: 100  //子节点之间的间距  
                        }, 
                        focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
                        lineStyle : { //==========关系边的公用线条样式。
                            normal : {
                                color: '#333',
                                width : '1',
                                type : 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                                curveness : 0.3, //线条的曲线程度，从0到1
                                opacity : 0.6
                            // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                            },
                            emphasis : { //高亮状态
                                width : '2',
                                color: '#333',
                                type : 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                                curveness : 0.3, //线条的曲线程度，从0到1
                                opacity : 1
                            }
                        },
                        edgeLabel : { //==============线条的边缘标签 
                            normal : {
                                show : false,
                                textStyle: {
                                    fontSize: 10
                                }
                            },
                            emphasis : { //高亮状态
                                show : false,
                                textStyle: {
                                    fontSize: 12
                                }
                            }
                        },
                        categories:[
                            {name: '接口'},
                            {name: '服务'}
                        ]
                    }],
                    tooltip: { //==============显示鼠标移入的显示
                        triggerOn: 'mousemove', //点击  mousemove
                        enterable: true,
                        hideDelay: 50,
                        padding: 0,
                        confine: true,
                        formatter: function(params, ticket, callback) {
                            if (params.dataType === 'node') {
                                var html = '';
                                html += '<div class="dialogShow"><h5>依赖的服务数量为：' + params.data.symbolSize + '</h5>'
                                html += '<div>被依赖的服务数量为：' + params.data.symbolSize1 + '</div>'
                                html += '</div>'
                                return html;
                            } else if (params.dataType === 'edge') {
                                var html1 = '';
                                html1 += '<div class="dialogShow"><h5>服务源代码为：' + params.data.source + '</h5></div>';
                                return html1;
                            }
                        }
                    }
                }
                myChart.setOption(option); 
            },
            GetRandom (list) {
                for (var i = 0; i < this.list1.length; i++) {
                    var x = Math.floor(Math.random() * 400);
                    var y = Math.floor(Math.random() * 400);
                    var colorAll = ['#a75ebc', '#0025ff', '#ff7e00', '#289c00', '#cccccc'];
                    var n = Math.floor(Math.random() * 3);
                    var color = colorAll[n];
                    this.list1[i].x = 200;
                    this.list1[i].y = 200;
                    this.list1[i].color = color;
                }
            }
        }
    }
</script>
